<template>
  <div class="full-calendar-header">
    <div class="header-left">
      <slot name="header-left"></slot>
    </div>
    <div class="header-center">
      <span class="prev-month" @click.stop="goPrev">{{leftArrow}}</span>
      <span class="title">{{title}}</span>
      <span class="next-month" @click.stop="goNext">{{rightArrow}}</span>
    </div>
    <div class="header-right">
      <slot name="header-right"></slot>
    </div>
  </div>
</template>
<script >
import moment from "moment";

export default {
  props: {
    currentMonth: {},
    titleFormat: {},
    firstDay: {},
    monthNames: {},
    locale: {},
    typesof: {}
  },
  data() {
    return {
      leftArrow: "<",
      rightArrow: ">"
    };
  },
  computed: {
    title() {
      // if (!this.currentMonth) return;
      if (this.typesof == 0) {
        // 月
        return this.currentMonth.locale(this.locale).format("YYYY-MM");
      } else if (this.typesof == 1) {
        // 周
        return (
          moment(this.currentMonth)
            .startOf("week")
            .format("YYYY-MM-DD") 
            +
          "------" +
          moment(this.currentMonth)
            .endOf('week')
            .format("YYYY-MM-DD")
        );
      } else if (this.typesof == 2) {
        //天
        //  console.log(moment(this.currentMonth))
        return this.currentMonth.locale(this.locale).format("YYYY-MM-DD");
      }
      return "";
    }
  },
  methods: {
    // 左
    goPrev() {
      let newMonth;
      if (this.typesof == 0) {
        // 月
        newMonth = moment(this.currentMonth)
          .subtract(1, "months")
          .startOf("month");
      this.$emit("change", newMonth);
      } else if (this.typesof == 1) {
        // 周
        newMonth = moment(this.currentMonth)
          .subtract(1, "weeks")
          .startOf("isoWeek");
          this.$emit("change", newMonth);
      } else if (this.typesof == 2) {
        //天
        newMonth = moment(this.currentMonth)
          .subtract(1, "days")
          .startOf("day");
          this.$emit("change", newMonth);
      }
    },
    // 右
    goNext() {
      let newMonth;
      if (this.typesof == 0) {
        // 月
        newMonth = moment(this.currentMonth)
          .add(1, "months")
          .startOf("month");
          this.$emit("change", newMonth);
      } else if (this.typesof == 1) {
        // 周
        newMonth = moment(this.currentMonth)
          .add(1, "weeks")
          .startOf("isoWeek");
          const zhou =newMonth
          this.$emit("change", zhou);
      } else if (this.typesof == 2) {
        //天
        newMonth = moment(this.currentMonth)
          .add(1, "days")
          .startOf("day");
          this.$emit("change", newMonth);
      }
      
    }
  }
};
</script>
<style lang="scss">
.full-calendar-header {
  display: flex;
  align-items: center;
  .header-left,
  .header-right {
    flex: 1;
  }
  .header-center {
    flex: 3;
    text-align: center;
    .title {
      margin: 0 10px;
    }
    .prev-month,
    .next-month {
      cursor: pointer;
    }
  }
}
</style>
